<template>
    <section>
        <div class="wrapper">
            <ul>
                <li v-for="(item,index) in rankings" :key="index">
                    <i>{{ index+1 }}</i>
                    <span>
                        <img :src="item.photograph" alt="">
                    </span>
                    <p>{{ item.optionName }}</p>
                    <h4>{{ item.cnt }}</h4>
                </li>
            </ul>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

export default {
    data(){
        return{
            id: '',
            rankings: [],
        }
    },
    methods:{
        voteResult(id){
            api.voteResult(id).then(res => {
                if(res.code=="success"){
                    this.rankings=res.data.filter((item)=>{
                        return item.result=="赞成";
                    });
                }else{
                    Toast.fail({
                        message: res.desc,
                        duration: '3000',
                    });
                    let timer = setInterval(()=>{
                        this.$router.go(-1);
                        clearInterval(timer);
                    },3500);
                }
            });
        },
    },
    mounted(){
        this.id=this.$route.query.tdata;
        this.voteResult(this.id);
    },
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    background: #F2D5C0 url(../imgs/ranking.jpg) no-repeat center top;
    background-size: contain;
}
.wrapper{
    position: absolute;
    top: 90px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    padding: 10px 20px 15px;
    background-color: #fff;
    overflow: auto;
    ul li{
        display: flex;
        align-items: center;
        height: 50px;
        padding: 15px 0 10px;
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #CBCBCB;
        &:last-child{
            border-bottom: 0;
        }
        i{
            position: relative;
            font-size: 24px;
            z-index: 1;
            &::after{
                content: '';
                position: absolute;
                left: -3px;
                right: -3px;
                bottom: 5px;
                height: 4px;
                background-color: #BC0100;
                z-index: -1;
            }
        }
        span{
            width: 50px;
            height: 50px;
            margin: 0 10px 0 22px;
            background-color: #EAAD7E;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        p{
            flex-grow: 1;
        }
        h4{
            color: #BC0100;
            font-size: 24px;
            font-style: italic;
        }
    }
}
</style>